[class*=animation-] {
    animation-duration: .5s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

.animation-fade {
    animation-name: fade;
    animation-duration: .8s;
    animation-timing-function: linear
}

.animation-toLeft{/* 向左渐入 */
	animation-name:toLeft
}
.animation-toRight{/* 向右渐入 */
	animation-name:toRight
}
.animation-toTop{/* 向上渐入 */
	animation-name:toTop
}
.animation-toBottom{/* 向下渐入 */
	animation-name:toBottom
}
.animation-toLeftTop{/* 向左上渐入 */
	animation-name:toLeftTop
}
.animation-toRightTop{/* 向右上渐入 */
	animation-name:toRightTop
}
.animation-toRightBottom{/* 向右下渐入 */
	animation-name:toRightBottom
}
.animation-toLeftBottom{/* 向左下渐入 */
	animation-name:toLeftBottom
}
.animation-leaveLeft{/* 向左渐出 */
	animation-name:leaveLeft
}
.animation-leaveRight{/* 向右渐出 */
	animation-name:leaveRight
}
.animation-leaveTop{/* 向下渐出 */
	animation-name:leaveTop
}
.animation-leaveBottom{/* 向下渐出 */
	animation-name:leaveBottom
}
.animation-leaveLeftTop{/* 向左上渐入 */
	animation-name:leaveLeftTop
}
.animation-leaveRightTop{/* 向右上渐入 */
	animation-name:leaveRightTop
}
.animation-leaveRightBottom{/* 向右下渐入 */
	animation-name:leaveRightBottom
}
.animation-leaveLeftBottom{/* 向左下渐入 */
	animation-name:leaveLeftBottom
}

@keyframes toLeft {
    0% {opacity: 0;transform: translateX(100%);}
    100% {opacity: 1;transform: translateX(0%);}
}
@keyframes toRight {
    0% {opacity: 0;transform: translateX(-100%);}
    100% {opacity: 1;transform: translateX(0%);}
}
@keyframes toTop {
    0% {opacity: 0;transform: translateY(100%);}
    100% {opacity: 1;transform: translateY(0%);}
}
@keyframes toBottom {
    0% {opacity: 0;transform: translateY(-100%);}
    100% {opacity: 1;transform: translateY(0%);}
}
@keyframes toLeftTop {
    0% {opacity: 0;transform:translate(-100%,-100%) scale(0) rotate(0);left: 0;top: 0;}
    100% {opacity: 1;transform: translate(-50%,-50%) scale(1) rotate(360deg);left: 50%;top: 50%;}
}
@keyframes toRightTop {
    0% {opacity: 0;transform:translate(100%,-100%) scale(0) rotate(0);right: 0;top: 0;}
    100% {opacity: 1;transform: translate(50%,-50%) scale(1) rotate(360deg);right: 50%;top: 50%;}
}
@keyframes toRightBottom {
    0% {opacity: 0;transform:translate(100%,100%) scale(0) rotate(0);right: 0;bottom: 0;}
    100% {opacity: 1;transform: translate(50%,50%) scale(1) rotate(360deg);right: 50%;bottom: 50%;}
}
@keyframes toLeftBottom {
    0% {opacity: 0;transform:translate(-100%,100%) scale(0) rotate(0);left: 0;bottom: 0;}
    100% {opacity: 1;transform: translate(-50%,50%) scale(1) rotate(360deg);left: 50%;bottom: 50%;}
}
@keyframes leaveLeft{
    0% {opacity: 1;transform: translateX(0);}
    100% {opacity: 0;transform: translateX(-100%);}
}
@keyframes leaveRight {
    0% {opacity: 1;transform: translateX(0);}
    100% {opacity: 0;transform: translateX(100%);}
}
@keyframes leaveTop {
    0% {opacity: 1;transform: translateY(0%);}
    100% {opacity: 0;transform: translateY(-100%);}
}
@keyframes leaveBottom {
    0% {opacity: 1;transform: translateY(0%);}
    100% {opacity: 0;transform: translateY(100%);}
}
@keyframes leaveLeftTop {
    0% {opacity: 1;transform: translate(-50%,-50%) scale(1) rotate(360deg);left:50%;top:50%;}
    100% {opacity: 0;transform:translate(-100%,-100%) scale(0) rotate(0);left:0;top:0;}
}
@keyframes leaveRightTop {
	0% {opacity: 1;transform: translate(50%,-50%) scale(1) rotate(360deg);right: 50%;top: 50%;}
    100% {opacity: 0;transform:translate(100%,-100%) scale(0) rotate(0);right: 0;top: 0;}
}
@keyframes leaveRightBottom {
	0% {opacity: 1;transform: translate(50%,50%) scale(1) rotate(360deg);right: 50%;bottom: 50%;}
    100% {opacity: 0;transform:translate(100%,100%) scale(0) rotate(0);right: 0;bottom: 0;}
}
@keyframes leaveLeftBottom {
	0% {opacity: 1;transform: translate(-50%,50%) scale(1) rotate(360deg);left: 50%;bottom: 50%;}
    100% {opacity: 0;transform:translate(-100%,100%) scale(0) rotate(0);left: 0;bottom: 0;}
}


.animation-ballToRight{/* 球向右滚入 */
	animation-name:ballToRight;
	animation-duration: 1.6s;
}
.animation-ballToLeft{/* 球向右滚入 */
	animation-name:ballToLeft;
	animation-duration: 1.6s;
}
.animation-ballLeaveRight{/* 球向右滚入 */
	animation-name:ballLeaveRight;
	animation-duration: 1.6s;
}
.animation-ballLeaveLeft{/* 球向右滚入 */
	animation-name:ballLeaveLeft;
	animation-duration: 1.6s;
}

@keyframes ballToRight {
	0% {transform: translate(-100%,-50%) rotate(0);left: 0%;top: 50%;border-radius: 50%;max-width: 50px;max-height: 50px;overflow: hidden;}
    25% {transform:translate(-50%,-50%) rotate(360deg);left: 50%;top: 50%;border-radius: 50%;max-width: 50px;max-height: 50px;overflow: hidden;}
	100% {transform:translate(-50%,-50%) rotate(360deg);left: 50%;top: 50%;max-width: 4000px;max-height:4000px;}
}
@keyframes ballToLeft {
	0% {transform: translate(100%,-50%) rotate(0);right: 0%;top: 50%;border-radius: 50%;max-width: 50px;max-height: 50px;overflow: hidden;}
    25% {transform:translate(50%,-50%) rotate(-360deg);right: 50%;top: 50%;border-radius: 50%;max-width: 50px;max-height: 50px;overflow: hidden;}
	100% {transform:translate(50%,-50%) rotate(-360deg);right: 50%;top: 50%;max-width: 4000px;max-height:4000px;}
}
@keyframes ballLeaveRight {
	0% {transform:translate(-50%,-50%) rotate(360deg);left: 50%;top: 50%;max-width: 4000px;max-height:4000px;}
	40% {transform:translate(-50%,-50%) rotate(360deg);left: 50%;top: 50%;border-radius: 50%;max-width: 50px;max-height: 50px;overflow: hidden;}
	100% {transform: translate(-100%,-50%) rotate(0);left: 0%;top: 50%;border-radius: 50%;max-width: 50px;max-height: 50px;overflow: hidden;}
}
@keyframes ballLeaveLeft {
	0% {transform:translate(50%,-50%) rotate(-360deg);right: 50%;top: 50%;max-width: 4000px;max-height:4000px;}
	40% {transform:translate(50%,-50%) rotate(-360deg);right: 50%;top: 50%;border-radius: 50%;max-width: 50px;max-height: 50px;overflow: hidden;}
	100% {transform: translate(100%,-50%) rotate(0);right: 0%;top: 50%;border-radius: 50%;max-width: 50px;max-height: 50px;overflow: hidden;}
}

.animation-diffusion{/* 向四周扩散 */
	animation-name:diffusion;
}
.animation-fold{/* 向中心合拢 */
	animation-name:fold;
}

@keyframes diffusion {
    0% {opacity: 0;transform: translate(-50%,-50%) scale(0);left:50%;top:50%;border-radius: 50%;}
    100% {opacity: 1;transform:translate(-50%,-50%) scale(1);left:50%;top:50%;}
}
@keyframes fold {
	0% {opacity: 1;transform:translate(-50%,-50%) scale(1);left:50%;top:50%;}
    100% {opacity: 0;transform: translate(-50%,-50%) scale(0);left:50%;top:50%;border-radius: 50%;}
}

.animation-water{/* 水滴滴落 */
	animation-name:water;
	animation-duration: 1.6s;
}

@keyframes water {
	0% {max-width: 50px;max-height: 50px;border-radius: 50%;overflow: hidden;top:0;left: 50%;transform: translate(-50%,-50%);}
	
	20% {max-width: 50px;max-height: 50px;border-radius: 50%;overflow: hidden;top:45%;left: 50%;transform: translate(-50%,-50%);}
	30% {max-width: 50px;max-height: 20px;border-radius: 50%;overflow: hidden;top:50%;left: 50%;transform: translate(-50%,-50%);}
	40% {max-width: 50px;max-height: 50px;border-radius: 50%;overflow: hidden;top:45%;left: 50%;transform: translate(-50%,-50%);}
	
	55% {max-width: 50px;max-height: 50px;border-radius: 50%;overflow: hidden;top:35%;left: 50%;transform: translate(-50%,-50%);}
	70% {max-width: 50px;max-height: 20px;border-radius: 50%;overflow: hidden;top:50%;left: 50%;transform: translate(-50%,-50%);}
	85% {max-width: 50px;max-height: 50px;border-radius: 50%;overflow: hidden;top:50%;left: 50%;transform: translate(-50%,-50%);}
	/* 70% {max-width: 50px;max-height: 25px;border-radius: 50%;overflow: hidden;top:50%;left: 50%;transform: translate(-50%,-50%);} */
    100% {max-width: 100%;max-height:100vh;overflow: hidden;top:50%;left: 50%;transform: translate(-50%,-50%);}
}